<template>
  <div class="user-edit">
    <!-- Modal -->
    <!-- :styles="{top: '50%',transform: 'translateY(-50%)','border-radius': '15px',height: '80%','overflow-y': 'auto'}" -->
    <Modal
      :title="title"
      v-model="visible"
      width="700"
      :styles="{top: '20px','border-radius': '15px'}"
      :mask-closable="type == '0'"
      scrollable=true
      transfer
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <Form
          ref="form"
          :model="form"
          :rules="ruleValidate"
          label-width="100"
        >
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="名称：" prop="title">
                <Input v-model="form.title" />
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="规则选择:" prop="cleanType">
                <Radio-group v-model="form.cleanType" @on-change="change">
                  <Radio label="1"><span>固定周期</span></Radio>
                  <Radio label="2"><span>延续周期</span></Radio>
              </Radio-group>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="清零时间:" prop="cleanDay" v-if="cleanDayShow == '1'">
                <span class="txt mr">每月</span><Input v-model="form.cleanDay" /><span class="txt ml">日</span>
              </FormItem>
              <FormItem label="清零时间:" prop="cleanDay" v-if="cleanDayShow == '2'">
                <Input v-model="form.cleanDay" /><span class="txt ml">天</span>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="规则描述：" prop="description">
                <Input type="textarea" v-model="form.description" />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" :loading="submitLoading" @click="submit">保存</Button>
        <Button size="large" @click="visible = false">取消</Button>
      </div>
      <!-- <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div> -->
    </Modal>
  </div>
</template>

<script>
import { 
scIntegralCleanAdd
} from "@/api/index";
export default {
  name: "integral-clean-addEdit",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    formSetData: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      cleanDayShow: 0,
      form: {cleanType: '1'},
      ruleValidate: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        cleanType: [
          { required: true, message: "请选择规则", trigger: "change" }
        ],
        cleanDay: [
          { required: true, message: "请输入清零时间", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入规则描述", trigger: "blur" }
        ]
      },
    };
  },
  methods: {
    init() {
      
    },
    change() {
      this.cleanDayShow = this.form.cleanType
    },
  
    submit() {
      // console.log(this.formSet)
      this.$refs.form.validate((valid) => {
        if(valid) {
          scIntegralCleanAdd(this.form).then(res => {
            if (res.success) {
              this.$Message.success("操作成功")
              this.visible = false
              this.$emit("on-submit", true);
            }
          })
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "会议室设置";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加积分清零时间规则";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 230) + "px";
      } else {
        this.title = "用户详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      // this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // console.log('设置')
        // this.formSet = {}
      } else {
        this.form = {}
      }
      this.visible = value;
    },
    
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
.ivu-form-item-content{
  display: flex;
  .txt{
    width: 45px;
    &.ml{
      margin-left: 10px;
    }
  }
}
</style>

